<template>
  <div class="map h100">
    <header>
      <div class="search">
        <input type="text" placeholder="城市中文名或者拼音">
        <span>|&nbsp;&nbsp;取消</span>
      </div>
      <p>定位城市<span>定位</span></p>
      <div class="loading">
        <a :location="location">{{this.location}}</a>
        <span class="hot">热门</span>
      </div>
      <p>热门城市</p>
    </header>
    <div class="hotCity">
      <a @click="saveLocation(item)" v-for='(item,index) in hotCity' 
      :key="index">{{item}}</a>
    </div>
    <van-index-bar>
      <van-index-anchor index="A"/>
      <van-cell @click="saveLocation(item)" v-for='(item,index) in titleA' :key="index" :title="item" />
      <van-index-anchor index="B"/>
      <van-cell v-for='(item,index) in titleB' :key="index" :title="item" />
      <van-index-anchor index="C"/>
      <van-cell title="沧州" />
      <van-cell title="长春" />
      <van-cell title="成都" />
      <van-cell title="赤峰" />
      <van-cell title="常德" />
      <van-cell title="长治" />
       <van-index-anchor index="D"/>
      <van-cell title="大理" />
      <van-cell title="丹东" />
      <van-cell title="东莞" />
      <van-cell title="德宏" />
      <van-cell title="大连" />
      <van-cell title="大庆" />
      <van-index-anchor index="E"/>
      <van-cell title="府谷" />
      <van-cell title="鄂州" />
      <van-cell title="鄂尔多斯" />
      <van-cell title="恩施" />
      <van-index-anchor index="F"/>
      <van-cell title="福州" />
      <van-cell title="佛山" />
      <van-cell title="抚顺" />
      <van-cell title="阜新" />
    </van-index-bar>
  </div>
</template>

<script>
export default {
    data() {
      return {  
        location:'正在定位......',
        hotCity:["北京","上海","广州","深圳","天津","杭州","南京","成都","武汉"],
        titleA:[
          "阿城","安达","鞍山","阿鲁旗","敖汉","阿巴嘎","阿荣旗","阿尔山","阿左旗","阿右旗" 
        ],
        titleB:["北京","保定","波兰" ],
      }
    },
    created() {
       /*  axios.get('/getDetail', {
          params: {
            id: this.$route.query.id
          }
        }).then(res => {
          this.detailInfo = res.data
        }) */
    },
    methods: {
      saveLocation(item){
        localStorage.setItem("city",item)
        let city =localStorage.getItem("city");
        this.location = city
        this.back();
      },
      back() {
        // 返回
        this.$router.back("/home/index")
      }
    }
}
</script>

<style scoped>
a{
    text-decoration: none;
    color: black;
}
.map{
  display: flex;
  flex-direction: column;
}
header{
  width: 100%;
}
header .search{
  margin:.2rem 0 .2rem .2rem;
  color: #EEEEEE;
}
header input{
  border: none;
}
header .search span{
  float: right;
  font-size: .13rem;
  margin-right: .2rem;
  color: black;
}
header p{
  height: .5rem;
  line-height: .5rem;
  padding-left: .2rem;
  background-color: #EEEEEE;
}
header p span{
  float: right;
  margin-right: .2rem;
  font-size: .13rem;
}
header .loading{
  height: 1.5rem;
  position: relative;
}
header .loading a{
  display: block;
  line-height: .76rem;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: .4rem;
  width: 1.89rem;
  height: .76rem;
  padding-left: .2rem;
  background-color: #EEEEEE;
}
header .loading .hot{
  position: absolute;
  right: 0;
  top: 0;
  margin-right: .2rem;
  font-size: .13rem;
}
/* 热门城市 */
.hotCity{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.hotCity a{
  width: 2.1rem;
  height: .5rem;
  line-height: .5rem;
  margin: .2rem 0;
  text-align: center;
  background-color: #EEEEEE;
}
/* 城市字母列表 */
.list{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list .letter{
  height: .5rem;
  line-height: .5rem;
  padding-left: .2rem;
  background-color: #EEEEEE;
}
.list a{
  margin-left: .2rem;
  height: .8rem;
  line-height: .8rem;
  border-bottom: 1px solid;
}
::v-deep .van-index-bar__index{
  margin: 0.06rem 0;
}
</style>